<template>
    <div class="header">
       <div class="logo">茶七网</div>
        <div class="header-m">
            <img src="@/assets/img/search.png" alt="">
            <input type="text" placeholder="搜您喜欢的..." @mouseenter="goPath">
        </div>
        <div class="header-r">
            <van-icon name="service-o" size="24" />
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            goPath() {
                this.$router.push('/search')
            }
        }
    }
</script>

<style lang="less" scoped>
.header {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #b0352f;
    color: #fff;
    height: 2.75rem;
    .logo {
        font-size: 24px;
    }
    .header-m {
        height: 1.875rem;
        border-radius: 1.875rem;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0 .625rem;
        img {
            width: 1.25rem;
        }
        input {
            margin-left:.625rem;
            outline: none;
            border: none;
        }
    }
}
</style>